<template>
    <div class="app-container" v-loading="loadings">
        <!-- 查询模块 -->
        <div class="formDiv">
            <el-form ref="form"  :inline="true" label-width="130px">
                <el-row>
                    <el-col :span="6">
                        <el-form-item label="会员手机号">
                            <el-input placeholder="会员手机号" v-model="params.username"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="会员姓名">
                            <el-input placeholder="会员姓名" v-model="params.realname"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="是否有补贴">
                            <el-select v-model="params.isSubsidy" clearable>
                                <el-option label="是" :value="1"></el-option>
                                <el-option label="否" :value="0"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="会员类型">
                            <el-select v-model="params.accountType" clearable>
                                <el-option label="普通会员" value="ordinary"></el-option>
                                <el-option label="369会员" value="369"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-button style="margin-left:60px" type="primary" @click="searchfun">查询</el-button>
                        <el-button
                            type="primary"
                            v-if="permissionJson.indexOf('AdminUserProvider.accountListExport') !=-1"
                            @click="exporfun"
                        >导出</el-button>
                    </el-col>
                </el-row>
            </el-form>
        </div>
        <!-- table -->
        <div class="table">
            <el-table :data="tableData" style="width: 100%">
                <el-table-column
                    type="index"
                    label="序号"
                    fixed="left"
                    align="center"
                    :index="table_index"
                    width="50"
                ></el-table-column>
                <el-table-column prop="username" align="center" label="会员手机号">
                     <template slot-scope="scope">
            <div>{{scope.row.username | phonereg }}</div>
          </template>
                </el-table-column>
                <el-table-column prop="realname" align="center" label="会员名称"></el-table-column>
                <el-table-column prop="businessAccountType" align="center" label="会员类型"></el-table-column>
                <!-- <el-table-column prop="coin" align="center" label="可提现额度">
                    <template slot-scope="scope">
                        <el-button type="text" @click="jum(scope.row,1,3)">{{scope.row.coin}}</el-button>
                    </template>
                </el-table-column>  -->
                <el-table-column prop="name" align="center" label="提现金币">
                    <template slot-scope="scope">
                        <el-button type="text" @click="gojum(scope.row,'3,8')">{{scope.row.coin||0}}</el-button>
                    </template> 
                </el-table-column> 
                <el-table-column prop="name" align="center" label="待返金币">
                    <template slot-scope="scope">
                        <el-button type="text" @click="gojum(scope.row,'4')">{{scope.row.waitGoldCoin||0}}</el-button>
                    </template>
                </el-table-column>    
                <el-table-column prop="name" align="center" label="银币">
                    <template slot-scope="scope">
                        <el-button type="text" @click="gojum(scope.row,'1,2')">{{scope.row.silverCoin||0}}</el-button>
                    </template>
                </el-table-column>   
                <!-- <el-table-column prop="name" align="center" label="可消费额度积分">
                    <template slot-scope="scope">
                        <el-button type="text" @click="jum(scope.row,1,4)">{{scope.row.waitCredit}}</el-button>
                    </template>
                </el-table-column>
                <el-table-column prop="name" align="center" label="活动积分">
                    <template slot-scope="scope">
                        <el-button type="text" @click="jum(scope.row,1,1)">{{scope.row.credit}}</el-button>
                    </template>
                </el-table-column>
                <el-table-column prop="name" align="center" label="消费积分">
                    <template slot-scope="scope">
                        <el-button
                            type="text"
                            @click="jum(scope.row,1,2)"
                        >{{scope.row.usableCredit}}</el-button>
                    </template>
                </el-table-column> -->
                <el-table-column prop="name" align="center" label="奖励">
                    <template slot-scope="scope">
                        <el-button type="text" @click="jum(scope.row,2)">{{scope.row.refereeReward}}</el-button>
                    </template>
                </el-table-column>
                <el-table-column prop="isSubsidy" align="center" label="是否有补贴"></el-table-column>
                <el-table-column label="操作" align="center">
                    <template slot-scope="scope">
                        <div>
                            <el-button type="text" @click="jum(scope.row,3)">修改余额</el-button>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="block" style="margin: 40px 0;">
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="params.pageNum"
                :page-sizes="[10, 20, 50, 100]"
                :page-size="params.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
            ></el-pagination>
        </div>
    </div>
</template>
<script>
import vipmange from "@/api/vipmange/vipmange";
import { exportfile } from "@/api/commjs/exprot";
export default {
    data() {
        return {
            loadings:true,
            permissionJson: JSON.parse(
                localStorage.getItem("permissionJson")
            ),
            params: {
                pageNum: 1,
                pageSize: 20,
                username: null,
                realname: null,
                isSubsidy: null,
                accountType: null
            },
            tableData: [],
            total: 0
        };
    },
    created() {
        this.list();
    },
    watch: {
        "params.username": {
            handler(val, oldName) {
                if (!val) {
                    this.params.username = null;
                }
            },
            immediate: true
        },
        "params.realname": {
            handler(val, oldName) {
                if (!val) {
                    this.params.realname = null;
                }
            },
            immediate: true
        },
        "params.accountType": {
            handler(val, oldName) {
                if (!val) {
                    this.params.accountType = null;
                }
            },
            immediate: true
        },
        "params.isSubsidy": {
            handler(val, oldName) {
                if (!val && val != "0") {
                    this.params.isSubsidy = null;
                }
            },
            immediate: true
        }
    },
    methods: {
        gojum(datas,amountType){
            //列表页面
                //跳转到积分页面
                //type =1 金币 =2银币
                let type =1
                this.$router.push({
                    name: "icons",
                    query: { iconsId: datas.userId,type:type,amountType:amountType}
                });
        },
        exporfun() {
            exportfile(
                "/com.mmk.member.api.AdminUserProvider/1.0.0/accountListExport.html",
                this.params
            );
        },
        searchfun() {
            this.params.pageNum = 1;
            this.list();
        },
        list() {
            this.loadings = true
            vipmange.list(this.params).then(res => {
                if (res.data.code == 0) {
                    this.tableData = res.data.data.list;
                    this.total = res.data.data.count;
                } else {
                    this.$message({
                        message: res.data.msg,
                        type: "warning"
                    });
                }
                this.loadings = false
            });
        },
        table_index(index) {
            return (this.params.pageNum - 1) * this.params.pageSize + index + 1;
        },
        handleSizeChange(val) {
            this.params.pageNum = 1;
            this.params.pageSize = val;
            this.list();
        },
        handleCurrentChange(val) {
            this.params.pageNum = val;
            this.list();
        },
        jum(datas, type, num) {
            // console.log(datas)
            if (type == 1) {
                //跳转到积分页面
                this.$router.push({
                    name: "Integraldetails",
                    query: { userId: datas.userId, amountType: num }
                });
            }
            if (type == 2) {
                //奖励明细
                this.$router.push({
                    name: "bonusDetails",
                    query: { userId: datas.userId }
                });
            }

            if (type == 3) {
                //奖励明细
                console.log();
                this.$router.push({
                    name: "remainder",
                    query: { userId: datas.userId }
                });
            }
        }
    }
};
</script>